If you use the GitHub/GitLab integration with Cloudflare Pages, no configuration is required. Pushing to your repository will automatically build your project and deploy it.
Nuxt will detect the environment to set the correct Server/Nitro preset.To leverage server-side rendering on the edge, set the build command to: nuxt build
To statically generate your website, set the build command to: nuxt generate
Route matchingOn CloudFlare Pages, if an HTML file is found with a matching path to the current route requested, it will serve it. It will also redirect HTML pages to their extension-less counterparts: for instance, /contact.html will be redirected to /contact, and /about/index.html will be redirected to /about/.
To match Cloudflare route matching rules, set the nitro option autoSubfolderIndex to false.
nuxt.config.tsexport default defineNuxtConfig({ nitro: {prerender: { autoSubfolderIndex: false} }})Direct UploadAlternatively, you can use wrangler to upload your project to Cloudflare.
In this case, you will have to set the preset manually.
Build your project for Cloudflare Pages:Terminalnpx nuxi build --preset=cloudflare_pagesDeploy, it will ask you to create a project for the first time:Terminalwrangler pages deploy dist/Disable Auto MinifyMake sure to disable the minification of HTML, CSS and JavaScript in CloudFlare -> Speed -> Optimization -> Auto Minify to avoid any Vue hydration.
Learn moreHead over Nitro documentation to learn more about the Cloudflare deployment preset.Head over CloudFlare Pages documentation to learn more about it.TemplatesAtidone
A todos application with user authentication, SSR and Cloudflare D1.
Atinotes
An editable website with universal rendering based on Cloudflare KV.
Atidraw
Web application that lets you to draw and share your drawings with the world, with Cloudflare R2 & AI.
Nuxt Image Gallery
An image gallery to upload, edit and share your images to the world, with Cloudflare R2.
Learn moreHead over Nitro documentation to learn more about the cloudflare deployment preset.